<!DOCTYPE HTML>
<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | Billionaires</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />
    
    <link href="billionaires.js" type="application/json" rel="exhibit/data" />
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/exhibit-api.js -->
    <script src="../api/exhibit-api.js"></script>
    
    <!-- Replace the URL here with http://api.simile-widgets.org/exhibit/current/extensions/map/map-extension.js -->
    <link rel="exhibit-extension" href="../api/extensions/map/map-extension.js" data-ex-apikey="AIzaSyCDO3EXWKJms5T38db48czFJZDunhYIzn8" />
    <!-- Replace the above apiKey with your own (this one will eventually stop working) -->
    
    <link rel='stylesheet' href='styles.css' type='text/css' />
  </head>
  <body>
    <ul id="path">
      <li><a href="/">SIMILE Widgets</a></li>
      <li><a href="/exhibit/">Exhibit</a></li>
      <li><a href="..">Demos</a></li>
      <li><span>Examples: Billionaires in History</span></li>
    </ul>

    <table id="frame"><tr>
        <td id="main-content">
            <h1>Billionaires in History</h1>
            
            <div data-ex-role="coder" id="wealth-coder"
                data-ex-coder-class="SizeGradient" 
                data-ex-gradient-points="0, 15; 200, 70">
            </div>
        
            <div data-ex-role="viewPanel">
                <div data-ex-role="view"
                    data-ex-view-class="Map"
                    data-ex-label="Where They Are From"
                    data-ex-latlng=".latLng"
                    data-ex-size-key=".wealth"
                    data-ex-size-coder="wealth-coder"
                    data-ex-bubble-width="200"
                    data-ex-bubble-height="200"
                    data-ex-map-height="500"
                    data-ex-size-legend-label="Wealth in Billion USD"
                    >
                    <div class="map-lens" data-ex-role="lens" style="display: none;">
                        <div><b data-ex-content=".label"></b>
                            <span data-ex-if-exists=".origin">from <span data-ex-content=".origin"></span></span>
                        </div>
                        <div><span data-ex-content=".wealth"></span> billions USD</div>
                        <div>Company: <span data-ex-content=".company"></span></div>
                    </div>
                </div>
                <div data-ex-role="view"
                    data-ex-view-class="Tabular"
                    data-ex-label="Compare Their Wealth"
                    data-ex-columns=".number, .label, .ageAtPeak, .wealth, .origin, .origin-country, .company"
                    data-ex-column-labels="rank, name, age at peak, wealth in billion USD, origin, country of origin, company"
                    data-ex-sort-column="0"
                    data-ex-sort-ascending="true"
                    ></div>
            </div>
        </td>
        <td id="sidebar">
            <div data-ex-role="facet" data-ex-facet-class="TextSearch" data-ex-facet-label="Search"></div>
            <hr/>
            <div data-ex-role="facet" data-ex-expression=".company" data-ex-facet-label="Companies" data-ex-height="15em"></div>
            <div data-ex-role="facet" data-ex-expression=".origin-country" data-ex-facet-label="Countries of Origin" data-ex-height="20em"></div>
        
        
            <div style="text-align: center; margin: 2em;">
                <div data-ex-role="logo" data-ex-color="Azure"></div>
                <a href="billionaires.js" target="_blank">get data file</a>
            </div>
        </td>
    </tr></table>
  </body>
</html>
